import { Link } from 'libframe-docs/components'

The `onBeforeRender()` hook is usually used together with [`passToClient`](/passToClient) to fetch data, see [Guides > Data Fetching](/data-fetching).

Since `.page.server.js` is only loaded in Node.js, ORM/SQL database queries can be used.

```js
// /pages/movies.page.server.js

// Note how we use `node-fetch`; this file is only run in Node.js thus we don't need
// to use an isomorphic (aka universal) implementation such as `cross-fetch`.
import fetch from "node-fetch";

export { onBeforeRender }

async function onBeforeRender(pageContext){
  const response = await fetch("https://api.imdb.com/api/movies/")
  const { movies } = await response.json()
  /* Or with an ORM:
  const movies = Movie.findAll() */
  /* Or with SQL:
  const movies = sql`SELECT * FROM movies;` */
  return {
    pageContext: {
      movies
    }
  }
}
```

We can also provide initial `pageContext` values at our server middlware (see [`createPageRenderer()`](/createPageRenderer))
which is where we usually pass information about the authenticated user
(see <Link href="/auth" />).

Examples:
- <Link href='/examples/react-full/pages/star-wars/index/index.page.server.ts' />
- <Link href='/examples/vue-full/pages/star-wars/index/index.page.server.ts' />

## Client Routing

If we use <Link href="/useClientRouter" noBreadcrumb />,
we also have the option to define [`onBeforeRender()` in `.page.js`](/onBeforeRender-isomorphic) instead of `.page.server.js`;
the hook is then called not only in Node.js but also in the browser.

## Multiple `onBeforeRender()`

For a given page, we can define [multiple `onBeforeRender()` hooks](/onBeforeRender-multiple).
